/**
 * @author 王晓伟
 * @description 扩展EXT的Ext.form.TextArea组件。定义了enableResizable属性用于确定是否可以拉伸，beforeWidth，beforeHeight原始的宽度和高度。
 */
Ext.ux.TextArea = Ext.extend(Ext.form.TextArea,{
	enableResizable:false,
	beforeWidth:100,
	beforeHeight:100,
	initComponent:function(){
		this.id = this.name;
		this.addEvents(
		/**
		 * 定义一个变化的事件,这个事件的触发条件是一旦TextArea组件的大小通过拉伸发生变化后就触发这个事件
		 * _textarea(组件名称)
		 */
		'chang',
		/**
		 * 定义一个设计状态下选中事件,这个事件的触发条件是一旦TextArea组件在设计状态下被选中后就触发这个事件
		 * _textarea(组件名称)
		 */
		'designSelected'
		);
		Ext.ux.TextArea.superclass.initComponent.call(this);
		/**
		 * 监听渲染前的的大小并且记录在原始大小中。
		 */
		this.on('beforerender',function(p){
			if(this.width != null){
				this.beforeWidth = this.width;
				this.beforeHeight= this.height;
			}
		});
		/**
		 * 监听渲染的事件。
		 */
		this.on('render',function(p) {
				/**
				 * 重新指定大小，原因是textarea组件的拉伸功能是通过EXT的拉伸重新外部套装一个动画DIV形成的。
				 * 由于渲染机制的原因，如果不重新指定大小原始的大小无法正在展现，展现的大小是他的外部动画DIV
				 * 的大小。定义拉伸功能对象，由于使用了拉伸动画DIV，每次拉伸完成时候必须重新指定动画DIV大小。
				 * 并且触发chang事件。
				 * 
				 */
				$('#'+p.id).width(this.beforeWidth);
				$('#'+p.id).height(this.beforeHeight);
				var _e =  Ext.get(this.id).findParent('div',null,true);
				if(this.enableResizable){
			        	new Ext.Resizable(this.id, {
			                handles: 's,e,se',
			                pinned: true,
			                transparent: true,
			                wrap : true,
			                resizeElement: function() {			           
			                    var box = this.proxy.getBox();
			                    p.updateBox(box);
			                    if (p.layout) {
			                        p.doLayout();
			                    }
			                    $('#'+p.id).parent().width($('#'+p.id).width());
			                    $('#'+p.id).parent().height($('#'+p.id).height());	
			                    p.fireEvent('chang',p);
			                    return box;
			                }
			           }); 
			           
					   $('#'+this.id).bind('click',{components:this},function(event){
							event.data.components.fireEvent('designSelected',event.data.components);
					   });    
				}     	
			}
		);
	}
}); 
Ext.reg('uxtextarea',Ext.ux.TextArea);